<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <link rel="stylesheet" href="../CSS/btn.css" >
    <style>
        .left
        {
            text-align:left;
        }
        .bgcolor{
            background-color: #e35b14;
        }
        .center {
            text-align:center;
        }
        .para{
            background-color: #1423d2;
        }
        .right{
            /*text-align:right;*/
            background-color: #180809;
        }
        /*.para ,.right {*/
        /*    color: cornsilk;*/
        /*}*/
        .nav .user{
            text-align:center;

            background-color: #9e5d2d;
            color: #1c1b19;
        }
        .nav,.user{
            text-align:right;

            background-color: #1f0f06;
            color: #23221f;
        }
        .user
        {
            font-size: 30px;
            background-color:red;
        }
        .login
        {
            background-color: #8e8ebd;
        }
        body {
            width: 90%;
            max-width: 900px;
            margin: 0 auto;
        }
        div:nth-of-type(1) {
            background: #0ff;
            width: 100px;
            float: left;
        }
        div:nth-of-type(2) {
            background: #f0f;
            width: 100px;
            float: right;
        }
        div:nth-of-type(3) {
            background: #ff0;
        }
    </style>
</head>

<body>
<h1>3 column layout example</h1>

<div>
    <h2>1 column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>


<div>
    <h2>2 column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. , eget fermentum sapien.</p>
</div>


<div>
    <h2>3 column</h2>
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est.</p>
</div>

</body>
</html>
